<template>
	<dz-popup v-model:show="_show" mode="bottom" border-radius="40" :isHidden="false">
		<view class="dz-p-20 dz-text-center">分享至</view>
		<view class="scroll-tap dz-flex">
			<view class="scroll-item dz-flex-1">
				<button class="dz-transparent-btn" open-type="share">
					<view class="image"><dz-image :src="iconWeixin" borderRadius="50" :width="100" :height="100"></dz-image></view>
					<view class="text dz-line-1 dz-main-color">微信好友</view>
				</button>
			</view>
			<view class="scroll-item dz-flex-1" @tap="onPoster">
				<view class="image"><dz-image :src="iconPoster" borderRadius="50" :width="100" :height="100"></dz-image></view>
				<view class="text dz-line-1">生成海报</view>
			</view>
		</view>
		<view class="dz-p-30 dz-text-center" @tap="hidePosterClick()">取消</view>
	</dz-popup>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

const props = defineProps({
	/**
	 * 显示状态
	 */
	show: {
		type: Boolean,
		default: false,
	},
});
const emit = defineEmits(['update:show', 'onPoster']);
const _show = ref<boolean>(props.show);
const iconWeixin = '/static/share/icon_weixin.png';
const iconPoster =
	'';

watch(
	() => props.show,
	(val) => {
		_show.value = val;
		if (!val) {
			hidePosterClick();
		}
	}
);

watch(
	() => _show.value,
	(val) => {
		if (!val) {
			emit('update:show', false);
		}
	}
);

function onPoster() {
	emit('onPoster');
	hidePosterClick();
}

function hidePosterClick() {
	emit('update:show', false);
	_show.value = false;
}
</script>

<style lang="scss" scoped>
.scroll-tap {
	white-space: nowrap;
	.scroll-item {
		display: inline-block;
		text-align: center;
		width: 160rpx;
		padding: 0 20rpx;
		.image,
		.icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.image {
			vertical-align: bottom;
			margin: 0 auto;
		}
		.icon {
			display: inline-block;
			> view {
				height: 100%;
			}
			.dzicon-likefill {
				font-size: 60rpx;
			}
		}
		.text {
			font-size: 28rpx;
			margin: 10rpx 0 20rpx;
		}
	}
	.dz-transparent-btn {
		display: block;
		background: transparent;
		margin: 0;
		padding: 0;
		border-radius: 0;
		border: 0;
		font-weight: 400 !important;
	}

	.dz-transparent-btn::after {
		border: 0;
	}
}
</style>
